<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./jquery-1.12.4.min.js"></script>
    <style>
        #big {
            margin: 50px auto;
            padding: 30px;
            width: 200px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            border: 1px solid #000;
        }

        #big div {
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="big">
        <div>
            账号:
            <input type="text" v-model="a">
        </div>
        <div>
            密码:
            <input type="text" v-model="b">
        </div>
        <div>
            男<input type="radio" value="男" name="gender" v-model="c">
            女<input type="radio" value="女" name="gender" v-model="c">
        </div>
        <div>
            唱<input type="checkbox" value="唱" v-model="d">
            跳<input type="checkbox" value="跳" v-model="d">
            rap<input type="checkbox" value="rap" v-model="d">
            篮球<input type="checkbox" value="篮球" v-model="d">
        </div>
        <div>
            职业:
            <select name=""  v-model="e">
                <option value="法师">法师</option>
                <option value="战士">战士</option>
                <option value="坦克">坦克</option>
                <option value="射手">射手</option>
                <option value="刺客">刺客</option>
                <option value="辅助">辅助</option>
            </select>
        </div>
        <button @click="fn">提交</button>
    </div>
</body>
<script>

    new Vue({
        el: "#big",
        data: {
            a: "",
            b: "",
            c: "",
            d: [],
            e:""
        },
        methods: {
            fn(e) {
                var obj={
                    "账号":this.a,
                    "密码":this.b,
                    "性别":this.c,
                    "爱好":this.d,
                    "职业":this.e
                }
                console.log(obj);
            }
        }
    })
</script>

</html>